<template>
    <HomePanel ref="target" title="热门品牌" sub-title="国际经典 品质保证">
        <template v-slot:right>
            <a href="javascript:;" class="iconfont icon-angle-left prev" :class="{ disabled: curr == 0 }"
                @click="toggle(-1)"></a>
            <a href="javascript:;" class="iconfont icon-angle-right next" :class="{ disabled: curr == 1 }"
                @click="toggle(1)"></a>
        </template>
        <div class="box" ref="box">
            <ul class="list" :style="{ transform: `translateX(${-curr * 1240}px)` }">
                <li v-for="item in brands" :key="item.id">
                    <RouterLink to="/">
                        <img v-lazy="item.picture">
                    </RouterLink>
                </li>
            </ul>
        </div>
    </HomePanel>
</template>
  
<script>
export default {
    name: 'HomeBrand',
}
</script>
<script setup>
import HomePanel from './home-panel.vue'
import { ref } from 'vue'
import { useLazyData } from '@/hooks'
import { getBrand } from '@/api/home'

const { target, result: brands } = useLazyData(getBrand, { limit: 10 })
const curr = ref(0)

const toggle = (val) => {
    curr.value = curr.value + val
}

</script>
  
  <style scoped lang='scss'>
  .home-panel {
      background: #f5f5f5
  }
  
  .iconfont {
      width: 20px;
      height: 20px;
      background: #ccc;
      color: #fff;
      display: inline-block;
      text-align: center;
      margin-left: 5px;
      background: $mainColor;
  
      &::before {
          font-size: 12px;
          position: relative;
          top: -2px
      }
  
      &.disabled {
          background: #ccc;
          cursor: not-allowed;
      }
  }
  
  .box {
      display: flex;
      width: 100%;
      height: 345px;
      overflow: hidden;
      padding-bottom: 40px;
  
      .list {
          width: 200%;
          display: flex;
          transition: all 1s;
  
          li {
              margin-right: 10px;
              width: 240px;
  
              &:nth-child(5n) {
                  margin-right: 0;
              }
  
              img {
                  width: 240px;
                  height: 305px;
              }
          }
      }
  }
  </style>
  